<template>
  <a-modal
    title="新增BOM"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item
          label="主键"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input placeholder="请输入主键" v-decorator="['bomId', {rules: [{required: true, message: '请输入主键！'}]}]" />
        </a-form-item>

        <a-form-item
          label="BOM名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input placeholder="请输入BOM名称" v-decorator="['bomName', {rules: [{required: true, message: '请输入BOM名称！'}]}]" />
        </a-form-item>

        <a-form-item>
<!--        复杂的BOM Table组件   -->
          <a-table :columns="columns" :data-source="data" class="components-table-demo-nested" bordered
                   :defaultExpandAllRows="true">
            <template slot="title" slot-scope="currentPageData">
              物料信息 BOM分组ID
            </template>                                                                                                                                                                                                                                                                            
            <a slot="operation" slot-scope="text">
              <a>添加{{text.name}}</a>
            </a>
            <a-table
              slot="expandedRowRender"
              slot-scope="text"
              :columns="innerColumns"
              :data-source="innerData"
              :pagination="false"
            >
              <span slot="materialCode" slot-scope="text, record, index">
                <a-select                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
                  v-if="record.editable"
                  v-model:value="record.materialCode"
                  placeholder="请选择原料"
                  show-search                                                                                                                                                                                                                                                                                                                            
                  option-filter-prop="children">
                  <a-select-option v-for="(item, index) in typeDictTypeDropDown"
                                   :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
                <template v-else>
                  {{ text }}
                </template>
              </span>
              <span slot="number" slot-scope="text, record, index">
                <template v-if="record.editable">
                  <a-input
                    style="margin: -5px 0"
                    v-model:value="record.number"
                    @change="e => handleChange(e.target.value, record.key, 'number')"
                  />
                </template>
                <template v-else>
                  {{ text }}
                </template>
              </span>
<!--              <span slot="operation" slot-scope="text" class="table-operation">-->
<!--                <a>修改</a>-->
<!--                <a>删除</a>-->
<!--              </span>-->
              <template slot="operation" slot-scope="text, record, index" class="table-operation">
                <div class="editable-row-operations">
                  <span v-if="record.editable">
                    <a @click="() => save(record.key)" style="margin-right: 5px;">保存</a>
                    <a @click="() => cancel(record.key)">取消</a>
                  </span>
                  <span v-else>
                    <a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a>
                    <a :disabled="editingKey !== ''" @click="() => edit(record.key)">删除</a>
                  </span>
                </div>
              </template>
            </a-table>
          </a-table>
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { add } from '@/api/modular/main/emsbom/emsBomManage'

  export default {
    data() {
      return {
        labelCol: {
          xs: {span: 24},
          sm: {span: 5}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 15}
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),

      //  table 组件
        columns : [
          { title: '物料种类', dataIndex: 'name', key: 'name' },
          // { title: 'Platform', dataIndex: 'platform', key: 'platform' },
          // { title: 'Version', dataIndex: 'version', key: 'version' },
          // { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
          // { title: 'Creator', dataIndex: 'creator', key: 'creator' },
          // { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
          { title: '操作', key: 'operation', scopedSlots: { customRender: 'operation' }, width: '140px' },
        ],
         data : [
           {
             key: 0,
             name: '原料'
           },
           {
             key: 1,
             name: '线缆'
           },
           {
             key: 2,
             name: '包材'
           },
         ],
        innerColumns : [
          { title: '序号', width:'80px', dataIndex: 'index', key: 'index', customRender: (text,record,index) => `${index+1}`},
          { title: '料号-名称', dataIndex: 'materialCode', key: 'materialCode', scopedSlots: { customRender: 'materialCode' } },
          { title: '名称', dataIndex: 'materialName', key: 'materialName' },
          { title: '数量', dataIndex: 'number', key: 'number', scopedSlots: { customRender: 'number' } },
          { title: '成本', dataIndex: 'costPrice', key: 'costPrice' },
          { title: '操作', dataIndex: 'operation', key: 'operation', scopedSlots: { customRender: 'operation' } },
        ],
        innerData : [
          {
            key: 0,
            materialCode: 'TP001',
            materialName: '某某物料',
            number: '10',
            costPrice: '150.5'
          }
        ],
        cacheData : [
          {
            key: 0,
            materialCode: 'TP001',
            materialName: '某某物料',
            number: '10',
            costPrice: '150.5',
          }
        ],
        value1: 0,
        editingKey: '',
        typeDictTypeDropDown: [
          {label: 'TP001', value: 'TP001'},
          {label: 'TP002', value: 'TP002'},
          {label: 'TP003', value: 'TP003'},
          {label: 'TP004', value: 'TP004'},
        ]
      }
    },
    methods: {
      add(record) {
        this.visible = true
      },
      handleSubmit() {
        const {form: {validateFields}} = this
        this.confirmLoading = true

        validateFields((errors, values) => {
          if (!errors) {
            add(values).then((res) => {
              this.confirmLoading = false
              if (res.success) {
                this.$message.success('新增成功')
                this.handleCancel()
                this.$emit('ok', values)
              } else {
                this.$message.info('新增失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel() {
        this.form.resetFields();
        this.visible = false
      },




    //  table
      handleChange(value, key, column) {
        const newData = [...this.data];
        const target = newData.filter(item => key === item.key)[0];
        if (target) {
          target[column] = value;
          this.data = newData;
        }
      },
      edit(key) {
        // const newData = [...JSON.parse(JSON.stringify(this.innerData))];
        // const newData = this.innerData;
        const newData = [...this.innerData];
        const target = newData.filter(item => key === item.key)[0];
        this.editingKey = key;
        if (target) {
          target.editable = true;
          this.innerData = newData;
        }
      },
      save(key) {
        const newData = [...this.innerData];
        const newCacheData = [...this.cacheData];
        const target = newData.filter(item => key === item.key)[0];
        const targetCache = newCacheData.filter(item => key === item.key)[0];
        if (target && targetCache) {
          delete target.editable;
          this.innerData = newData;
          Object.assign(targetCache, target);
          this.cacheData = newCacheData;
        }
        this.editingKey = '';
      },
      cancel(key) {
        const newData = [...this.innerData];
        const target = newData.filter(item => key === item.key)[0];
        this.editingKey = '';
        if (target) {
          Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
          delete target.editable;
          this.innerData = newData;
        }
      },
    }
  }
</script>
